<template>
  <div class="eryu-bottom">
    <div class="eryu-solt" :style="{ paddingLeft: lf + 'px' }">
      <div class="pl24">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EryuBottom",
  props: {},
  computed: {
    f1() {
      return this.$store.state.app.LfMenuLength;
    },
  },
  data() {
    return {
      lf: 120,
    };
  },

  watch: {
    f1: {
      immediate: true,
      handler(val, oldvalue) {
        this.lf = val;
      },
    },
  },
  created() {},

  methods: {},
};
</script>
<style lang="scss" scoped>
.eryu-bottom {
  height: 56px;
}
.eryu-solt {
  position: fixed;
  z-index: 9;
  bottom: 0px;
  left: 0px;
  width: 100%;
  min-height: 56px;

  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.03);
  filter: blur(0px);

  .pl24 {
    padding: 12px 24px;
    text-align: right;
  }
}
</style>